<template>
  <div class="detail-page-template">
    <div class="template-header">
      <h4>商品详情页模板</h4>
    </div>

    <div class="template-filter">
      <div class="filter-row">
        <span class="filter-label">平台：</span>
        <el-select v-model="selectedPlatform" placeholder="选择平台" size="small">
          <el-option v-for="platform in platforms" :key="platform.value" :label="platform.label" :value="platform.value" />
        </el-select>
      </div>
      <div class="filter-row">
        <span class="filter-label">商品类型：</span>
        <el-select v-model="selectedCategory" placeholder="选择类型" size="small">
          <el-option v-for="category in categories" :key="category.value" :label="category.label" :value="category.value" />
        </el-select>
      </div>
    </div>

    <div class="templates-grid">
      <div 
        v-for="template in filteredTemplates" 
        :key="template.id" 
        class="template-item"
        @click="selectTemplate(template)"
      >
        <div class="template-preview">
          <img :src="template.preview" :alt="template.name" />
        </div>
        <div class="template-info">
          <div class="template-name">{{ template.name }}</div>
          <div class="template-platform">{{ getPlatformName(template.platform) }}</div>
        </div>
      </div>
    </div>

    <div v-if="selectedTemplate" class="template-detail-overlay">
      <div class="template-detail">
        <div class="detail-header">
          <h5>{{ selectedTemplate.name }}</h5>
          <el-button icon="el-icon-close" circle size="mini" @click="closeDetail"></el-button>
        </div>
        <div class="detail-preview">
          <img :src="selectedTemplate.preview" :alt="selectedTemplate.name" />
        </div>
        <div class="detail-info">
          <div class="info-item">
            <span class="info-label">平台：</span>
            <span class="info-value">{{ getPlatformName(selectedTemplate.platform) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">类型：</span>
            <span class="info-value">{{ getCategoryName(selectedTemplate.category) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">尺寸：</span>
            <span class="info-value">{{ selectedTemplate.dimensions }}</span>
          </div>
        </div>
        <div class="detail-actions">
          <el-button type="primary" size="small" @click="useTemplate">使用模板</el-button>
          <el-button size="small" @click="customizeTemplate">自定义</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const emit = defineEmits(['apply-template']);

// 平台选择
const selectedPlatform = ref('all');
const platforms = [
  { label: '全部平台', value: 'all' },
  { label: '淘宝', value: 'taobao' },
  { label: '京东', value: 'jd' },
  { label: '拼多多', value: 'pdd' },
  { label: '抖音', value: 'douyin' }
];

// 商品类型
const selectedCategory = ref('all');
const categories = [
  { label: '全部类型', value: 'all' },
  { label: '服装', value: 'clothing' },
  { label: '数码', value: 'digital' },
  { label: '家居', value: 'home' },
  { label: '食品', value: 'food' }
];

// 详情页模板数据
const templates = [
  { 
    id: 'dp1', 
    name: '淘宝服装详情页', 
    preview: '/images/commerce/details/detail1.jpg', 
    dimensions: '750x长图',
    platform: 'taobao',
    category: 'clothing'
  },
  { 
    id: 'dp2', 
    name: '京东数码详情页', 
    preview: '/images/commerce/details/detail2.jpg', 
    dimensions: '750x长图',
    platform: 'jd',
    category: 'digital'
  },
  { 
    id: 'dp3', 
    name: '拼多多家居详情页', 
    preview: '/images/commerce/details/detail3.jpg', 
    dimensions: '750x长图',
    platform: 'pdd',
    category: 'home'
  },
  { 
    id: 'dp4', 
    name: '抖音食品详情页', 
    preview: '/images/commerce/details/detail4.jpg', 
    dimensions: '750x长图',
    platform: 'douyin',
    category: 'food'
  },
  { 
    id: 'dp5', 
    name: '淘宝数码详情页', 
    preview: '/images/commerce/details/detail5.jpg', 
    dimensions: '750x长图',
    platform: 'taobao',
    category: 'digital'
  },
  { 
    id: 'dp6', 
    name: '京东服装详情页', 
    preview: '/images/commerce/details/detail6.jpg', 
    dimensions: '750x长图',
    platform: 'jd',
    category: 'clothing'
  }
];

// 根据筛选条件过滤模板
const filteredTemplates = computed(() => {
  return templates.filter(template => {
    const platformMatch = selectedPlatform.value === 'all' || template.platform === selectedPlatform.value;
    const categoryMatch = selectedCategory.value === 'all' || template.category === selectedCategory.value;
    return platformMatch && categoryMatch;
  });
});

// 获取平台名称
function getPlatformName(platformValue) {
  const platform = platforms.find(p => p.value === platformValue);
  return platform ? platform.label : platformValue;
}

// 获取类型名称
function getCategoryName(categoryValue) {
  const category = categories.find(c => c.value === categoryValue);
  return category ? category.label : categoryValue;
}

// 模板选择与操作
const selectedTemplate = ref(null);

function selectTemplate(template) {
  selectedTemplate.value = template;
}

function closeDetail() {
  selectedTemplate.value = null;
}

function useTemplate() {
  if (selectedTemplate.value) {
    emit('apply-template', selectedTemplate.value);
    selectedTemplate.value = null;
  }
}

function customizeTemplate() {
  if (selectedTemplate.value) {
    emit('apply-template', { ...selectedTemplate.value, customize: true });
    selectedTemplate.value = null;
  }
}
</script>

<style scoped>
.detail-page-template {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
}

.template-header {
  margin-bottom: 15px;
}

.template-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.template-filter {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.filter-label {
  font-size: 13px;
  color: #606266;
  width: 70px;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  overflow-y: auto;
  flex: 1;
}

.template-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
}

.template-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #c6e2ff;
}

.template-preview {
  width: 100%;
  height: 200px;
  background-color: #f5f7fa;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-info {
  padding: 8px;
}

.template-name {
  font-size: 13px;
  color: #303133;
  margin-bottom: 4px;
}

.template-platform {
  font-size: 12px;
  color: #909399;
}

.template-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.template-detail {
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h5 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.detail-preview {
  padding: 15px;
  background-color: #f5f7fa;
  text-align: center;
  max-height: 400px;
  overflow-y: auto;
}

.detail-preview img {
  max-width: 100%;
  object-fit: contain;
}

.detail-info {
  padding: 15px;
  border-top: 1px solid #ebeef5;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  color: #606266;
  font-size: 13px;
  width: 60px;
}

.info-value {
  color: #303133;
  font-size: 13px;
}

.detail-actions {
  padding: 12px 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #ebeef5;
}
</style>